<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@	page import="com.yaodian100.core.common.utils.ServerValue"%>
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath()%>'/>
	<!-- 验证 -->
	<script type="text/javascript" charset="UTF-8" src="/js/formValidator_min.js" charset="UTF-8"></script>
	<script type="text/javascript" charset="UTF-8" src="/js/formValidator.js" charset="UTF-8"></script>
	<script type="text/javascript" charset="UTF-8" src="/js/formValidatorRegex.js" charset="UTF-8"></script>
	<!-- 月历 -->
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick.js"></script>
	<!-- 数字验证 -->
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
	<!-- 地址选单 -->
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick-zh-CN.js"></script>
	<script type="text/javascript" charset="UTF-8" src="/genJS/yaodian_zipcode.js"></script>
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.ext.js"></script>
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.js"></script>
	<script type="text/javascript" charset="UTF-8" src="/js/jquery.templating.js"></script>
	
	<link rel="stylesheet" type="text/css" href="/css/smoothness.datepick.css"/>
	<link rel="stylesheet" type="text/css" href="/css/validator.css"/>
	<script language="javascript">
	$().ready( function() {
			$.formValidator.initConfig({formid:"memberForm",onerror:function(msg){alert(msg)},onsuccess:function(){return true;}});
			$("#homePhone").numeric();
			$("#companyPhone").numeric();
			$("#mobile").numeric();
			$("#zipCode").numeric();
			
			$('#birthday').datepick({minDate: null, maxDate: new Date(), showOn: 'both', 
	    	buttonImageOnly: true, buttonImage: '/images/calendar.gif',dateFormat:"yy-mm-dd",yearRange: '-50:+50'}); 
    	
			function commonTemplate(item) {
				return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
			};
			function commonMatch(selectedValue) {
				return this.When == selectedValue; 
			};
		  $.each(provinceArray,function(index, item){
	        $("#province").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
		  });
			jQuery("#city").cascade("#province",{					
				list : cityArray,				
				template: commonTemplate,
				match: commonMatch 
			});
			jQuery("#district").cascade("#city",{					
				list: districtArray,
				template: commonTemplate,
				match: commonMatch 
			});
			if ( $("#memberId").val() != "" ){
				$.each(provinceArray,function(index, item){
					if ( item.Value == "${province}" ){
						$("#province").attr("selectedIndex",index+1);
					}
				});
				
				$.each(cityArray,function(index, item){
					if ( item.When == "${province}" ){
						$("#city").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
					}
				});
				
				var newCityArray = jQuery.grep(cityArray, function (item) { return item.When == "${province}"; });
				$.each(newCityArray,function(index, item){
					if ( item.Value == "${city}" ){
						$("#city").attr("selectedIndex",index+1);
					}
				});
				
				$.each(districtArray,function(index, item){
					if ( item.When == "${city}" ){
						$("#district").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
					}
				});
				
				newDistrictArray = jQuery.grep(districtArray, function (item) { return item.When == "${city}"; });
				$.each(newDistrictArray,function(index, item){
					if ( item.Value == "${district}" ){
						$("#district").attr("selectedIndex",index+1);
					}
				});

				$("#status").val("${member.status}");
				$("#status").attr("selected","selected");
				
				$("#rank").val("${member.rank}");
				$("#rank").attr("selected","selected");
				
				$("#applySource").val("${member.applySource}");
				$("#applySource").attr("selected","selected");
			}

			//栏位资料验证
			$("#loginId").formValidator({onfocus:"请输入登入代码,代码須介於2-20个字元之间,请勿输入特殊字元如:!@#$%^&*()_+-*/",oncorrect:"代码可以使用"}).inputValidator({min:2,max:20,onerror:"代码须介于2-20个字元之间且不能为空值"});
			if ( $("#name").val() != "" ){
				$("#name").formValidator({onfocus:"请输入姓名,请勿输入特殊字元如:!@#$%^&*()_+-*/",oncorrect:"姓名格式正确"}).inputValidator({min:2,max:10,onerror:"姓名须介于2-10个字元之间且不能为空值"});
			}
			$("#pwd").formValidator({onfocus:"請輸入密碼,密碼須介於6-16個字元之間,請勿輸入特殊字元如:!@#$%^&*()_+-*/",oncorrect:"密碼格式輸入正確"}).inputValidator({min:6,max:16,empty:{leftempty:false,rightempty:false,emptyerror:"密碼兩邊不能是空白"},onerror:"密碼須介於6-16個字元之中且不能為空值"});
			if ( $("#birthday").val() != "" ){
				$("#birthday").formValidator({onfocus:"請輸入生日",oncorrect:"日期格式輸入正確",defaultvalue:"1960-01-01"}).inputValidator({min:10,max:10,onerror:"日期不能為空值"});
			}
			$("#email").formValidator({onfocus:"請輸入email",oncorrect:"email格式輸入正確"}).inputValidator({min:6,max:100,onerror:"email長度不正確或不能為空值"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"email格式不正確"});
			if ( $("#zipCode").val() != "" ){
				$("#zipCode").formValidator({onfocus:"請輸入邮递区号",oncorrect:"邮递区号格式輸入正確"}).inputValidator({min:3,max:10,onerror:"邮递区号须介于3-10个字元之间且不能为空值"});
			}
			if ( $("#addr").val() != "" ){
				$("#addr").formValidator({onfocus:"請輸入地址",oncorrect:"地址格式輸入正確"}).inputValidator({min:2,max:100,onerror:"地址须介于2-100个字元之间且不能为空值"});
			}
			$("#submit_button").click(function(){
				if ( $("#zipCode").val() != "" || $("#addr").val() != ""){
					if ($("#province").val() == "" ){
						alert("请输入省");
						return false;
					}
					if ($("#city").val() == "" ){
						alert("请输入城市");
						return false;
					}
					if ($("#district").val() == "" ){
						alert("请输入地区");
						return false;
					}
				}
			});
		});
	</script>
<s:actionerror/>
<s:actionmessage/>
<s:fielderror/>
<h1>会员管理
<div class="f-link">
	<a href="${midContextPath}/member/search.do">回会员查詢页</a>
</div>
</h1>

<s:form action="save.do" method="post" id="memberForm">
	<table class="tb-data" width="100%">
		<tr>
			<th>登入代码</th>
			<td>
				<c-rt:choose>
					<c-rt:when test="${empty memberId}">
						<input type="text" name="loginId" id="loginId" value="${loginId}" maxlength="12"/>
						<div id="loginIdTip" style="width:450px;"></div>
					</c-rt:when>
					<c-rt:otherwise>${loginId}</c-rt:otherwise>
				</c-rt:choose>
				
			</td>
		</tr>
		<tr>
			<th>姓名</th>
			<td>
				<input type="text" name="name" id="name" value="${name }" maxlength="16"/>
				<div id="nameTip" style="width:450px;"></div>
			</td>
		</tr>
		<c-rt:if test="${empty memberId}">
		<tr>
			<th>密码</th>
			<td>
				<input type="password" name="pwd" id="pwd" value="${pwd}" maxlength="16"/>
				<div id="pwdTip" style="width:450px;"></div>
			</td>
		</tr>
		 </c-rt:if>
		<tr>
			<th>出生日期</th>
			<td>
				<s:date name="%{birthday}" format="yyyy-MM-dd" var="fmtBirthday2"/>
				<input type="text" name="birthday" id="birthday" value="${fmtBirthday2}" readonly="readonly"/>
				<div id="birthdayTip" style="width:450px;"></div>
			</td>
		</tr>
		<tr>
			<th>性别</th>
			<td>
				<input type="radio" name="sex" value="M" <c-rt:if test="${sex eq 'M'}">checked="checked"</c-rt:if>/>男
				<input type="radio" name="sex" value="F" <c-rt:if test="${sex eq 'F'}">checked="checked"</c-rt:if>/>女
			</td>
		</tr>
		<tr>
			<th>电子邮件</th>
			<td>
				<input type="text" name="email" id="email" value="${email}"/>
				<div id="emailTip" style="width:450px;"></div>
			</td>
		</tr>
		<tr>
			<th>地址</th>
			<td>
				郵遞區號:<input type="text" name="zipCode" id="zipCode" value="${zipCode}"/>
				<div id="zipCodeTip" style="width:450px;"></div>
				<select id="province" name="province">
					<option value="">== 选择省 ==</option>
				</select>省
				<select id="city" name="city">
					<option value="">== 选择城市 ==</option>
				</select>城市
				<select id="district" name="district">
					<option value="">== 选择地区 ==</option>
				</select>地区
				<input type="text" name="addr" id="addr" value="${addr}"/>
				<div id="addrTip" style="width:450px;"></div>
			</td>
		</tr>
		<tr>
			<th>住家电话</th>
			<td>
				<input type="text" name="homePhone" id="homePhone" value="${homePhone}"/>
			</td>
		</tr>
		<tr>
			<th>公司电话</th>
			<td>
				<input type="text" name="companyPhone" id="companyPhone" value="${companyPhone}"/>
			</td>
		</tr>
		<tr>
			<th>行动电话</th>
			<td>
				<input type="text" name="mobile" id="mobile" value="${mobile}"/>
			</td>
		</tr>
		<!-- 
		<tr>
			<th>会员状态</th>
			<td>
			<s:select name="status" id="status" list="memberStatus.options"
				listKey="key" listValue="value.name"/>
				</td>
		</tr>
		<tr>
			<th>会员等级</th>
			<td>
			<s:select name="rank" id="rank" list="memberRank.options"
				listKey="key" listValue="value.name"/>
			</td>
		</tr>
		 -->
		<tr>
			<th>applySource</th>
			<td>
				<select name="applySource" id="applySource">
					<option value="">== 选择加入来源 ==</option>
					<option value="yahoo">yahoo</option>
					<option value="pchome">pchome</option>
				</select>
			</td>
		</tr>
	</table>
	<input type="hidden" name="memberId" value="${memberId}"/>
	<input type="submit" id="submit_button" value="送出"/>
	<input type="button" onclick="this.form.action='${midContextPath}/member/search.do';this.form.submit();" value="Cancel"/>
</s:form>
